<!doctype html>
<html>

<head>
    <title>Demo &raquo; Resize &raquo; gridster.js</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <link rel="stylesheet" type="text/css" href="/scripts/gridster.js/jquery.gridster.min.css">
    <script src="/scripts/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/scripts/gridster.js/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <h1>Resize</h1>

    <p>Grab the right or bottom border and drag to the desired width or height.</p>

    <div class="controls">
        <button class="js-resize-random">Resize random widget</button>
    </div>

    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="4" data-sizey="4" data-min-sizex="4" data-min-sizey="4"
                data-max-sizex="4" data-max-sizey="4" data-type="link" data-id="900-1" data-val="http://www.uieip.com/">
                <iframe style="width: 100%;height: 100%;" src="http://www.uieip.com/"></iframe>
            </li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-max-sizex="1" data-min-sizey="2"
                data-max-sizey="2">resizable-1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" data-max-sizex="1" data-max-sizey="1">
                resizable-2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1" class="not-resizable">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="not-resizable">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="not-resizable">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" class="not-resizable">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1" class="not-resizable">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1" class="not-resizable">8</li>
            <li data-row="1" data-col="5" data-sizex="1" data-sizey="3" class="not-resizable">9</li>
        </ul>
        <div class="controls">
            <button class="js-seralize">Serialize</button>
        </div>

        <textarea id="log"></textarea>
    </div>

    <script type="text/javascript">
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

    <script type="text/javascript">
        var gridster;

        $(function () {

            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: [100, 100],
                widget_margins: [5, 5],
                helper: 'clone',
                resize: {
                    enabled: true,
                    // 自定义的 resize 函数，用于检查元素是否应该可调整大小  
                    resize: function (e, ui, widget) {
                        console.log($(widget).html());
                        if (!$(widget).hasClass('resizable')) {

                            e.stopPropagation();
                            return false; // 阻止调整大小  
                        }
                    }
                }
            }).data('gridster');


            $('.js-resize-random').on('click', function () {
                gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
                    getRandomInt(1, 4), getRandomInt(1, 4))
            });


            $('.js-seralize').on('click', function () {
                var $lis = $(".gridster ul li");
                var data = [];
                for (var i = 0; i < $lis.length; i++) {
                    var $li = $($lis[i]);
                    console.log($li.data());
                    var r_data = $li.data();
                    var row = {
                        row: r_data.row,
                        col: r_data.col,
                        sizex: r_data.sizex,
                        sizey: r_data.sizey
                    };
                    if (r_data.maxSizex) {
                        row.maxSizex = r_data.maxSizex;
                    }
                    if (r_data.maxSizey) {
                        row.maxSizey = r_data.maxSizey;
                    }
                    if (r_data.minSizex) {
                        row.minSizex = r_data.minSizex;
                    }
                    if (r_data.minSizey) {
                        row.minSizey = r_data.minSizey;
                    }
                    if (r_data.type) {
                        row.type = r_data.type;
                    }
                    if (r_data.id) {
                        row.id = r_data.id;
                    }
                    if (r_data.val) {
                        row.val = r_data.val;
                    }

                    data.push(row);
                }
                console.log(data);
                $('#log').val(JSON.stringify(data, null, 2));
            })
        });



    </script>
</body>

</html>